<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css开关样式</title>
</head>
<body>
<h2>开关切换</h2>
<label class="switch">
    <input type="checkbox" checked>
    <div class="slider"></div>
</label>
<label  class="switch">
    <input type="checkbox">
    <div class="slider"></div>
</label>
<br><br>
<label class="switch">
    <input type="checkbox">
    <div class="slider round"></div>
</label>
<label  class="switch">
    <input type="checkbox" checked>
    <div class="slider round"></div>
</label>
<style>
   .switch{
       position: relative;
       display: inline-block;
       width: 60px;
       height: 34px;
   }
    .switch input{
        display: none;
    }
    .slider{
        cursor: pointer;
        position: absolute;
        top:0;
        left:0;
        right: 0;
        bottom: 0;
        background-color: #ccc;
        transition: .4s;
    }
    .slider:before{
        content: "";
        width: 26px;
        height: 25px;
        background-color: white;
        position: absolute;
        left: 4px;
        bottom:4px;
        transition: .4s;
    }
   input:focus + .slider {
       box-shadow: 0 0 1px #2196F3;
   }
    input:checked + .slider{
        background-color: #2196f8;
    }
    input:checked + .slider:before{
        transform: translateX(26px);
    }
   .slider.round {
       border-radius: 34px;
   }

   .slider.round:before {
       border-radius: 50%;
   }

</style>
</body>
</html>
